<template>
  <div class="moments-page">
    <!-- 页面头部 -->
    <PageHeader
      title="朋友圈"
      :itemCount="momentsList.length"
      itemUnit="条动态"
      :secondaryCount="getTotalLikes()"
      secondaryUnit="次点赞"
      description="分享生活，记录点滴"
    />

    <!-- 朋友圈列表 -->
    <div class="moments-list">
      <!-- 每条朋友圈 -->
      <div v-for="moment in momentsList" :key="moment.id" class="moment-card">
        <!-- 用户信息区 -->
        <div class="user-info">
          <div class="avatar">
            <img :src="moment.author.avatar" :alt="moment.author.name" />
          </div>
          <div class="info">
            <div class="name">{{ moment.author.name }}</div>
            <div class="time">{{ formatTime(moment.createTime) }}</div>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
          <!-- 文字内容 -->
          <div
            v-if="moment.content"
            class="text"
            :class="{ 'text-expanded': expandedTexts[moment.id] }"
          >
            {{ moment.content }}
          </div>

          <!-- 长文本展开/收起 -->
          <div
            v-if="isLongText(moment.content)"
            class="text-toggle"
            @click="toggleTextExpand(moment.id)"
          >
            {{ expandedTexts[moment.id] ? '收起' : '展开' }}
            <i
              :class="expandedTexts[moment.id] ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'"
            ></i>
          </div>

          <!-- 图片内容 -->
          <div
            v-if="moment.images && moment.images.length > 0"
            class="images"
            :class="getImagesClass(moment.images.length)"
          >
            <div
              v-for="(image, index) in moment.images"
              :key="index"
              class="image-wrapper"
              @click="previewImage(moment.images, index)"
            >
              <img :src="image" :alt="`图片${index + 1}`" />
            </div>
          </div>

          <!-- 位置信息 -->
          <div v-if="moment.location" class="location">
            <i class="ri-map-pin-line"></i>
            <span>{{ moment.location }}</span>
          </div>
        </div>

        <!-- 互动区域 -->
        <div class="interaction">
          <div class="action-bar">
            <div class="action" @click="toggleLike(moment)">
              <i :class="moment.isLiked ? 'ri-heart-fill liked' : 'ri-heart-line'"></i>
              <span>{{ moment.isLiked ? '已赞' : '点赞' }}</span>
            </div>
            <div class="action" @click="focusCommentInput(moment.id)">
              <i class="ri-chat-1-line"></i>
              <span>评论</span>
            </div>
            <div class="action" @click="handleShare(moment)">
              <i class="ri-share-line"></i>
              <span>分享</span>
            </div>
          </div>

          <!-- 点赞列表 -->
          <div v-if="moment.likes && moment.likes.length > 0" class="likes-section">
            <i class="ri-heart-fill likes-icon"></i>
            <div class="likes-list">
              <span v-for="(like, index) in moment.likes" :key="like.id">
                {{ like.name }}{{ index < moment.likes.length - 1 ? '，' : '' }}
              </span>
            </div>
          </div>

          <!-- 评论列表 -->
          <div v-if="moment.comments && moment.comments.length > 0" class="comments-section">
            <div
              v-for="(comment, index) in displayedComments(moment)"
              :key="comment.id"
              class="comment"
            >
              <div class="comment-content-wrapper" @click="replyToComment(moment.id, comment)">
                <span class="commenter">{{ comment.name }}</span>
                <span class="comment-content">
                  <template v-if="comment.replyTo">
                    <span class="reply-tag">回复</span>
                    <span class="reply-to">{{ comment.replyTo }}</span
                    >：
                  </template>
                  {{ comment.content }}
                </span>
              </div>
            </div>

            <!-- 查看更多评论 -->
            <div
              v-if="moment.comments.length > 3 && !expandedComments[moment.id]"
              class="view-more-comments"
              @click="expandComments(moment.id)"
            >
              <span>查看全部 {{ moment.comments.length }} 条评论</span>
              <i class="ri-arrow-down-s-line"></i>
            </div>

            <!-- 收起评论 -->
            <div
              v-if="expandedComments[moment.id]"
              class="view-more-comments"
              @click="collapseComments(moment.id)"
            >
              <span>收起评论</span>
              <i class="ri-arrow-up-s-line"></i>
            </div>
          </div>

          <!-- 评论输入框 -->
          <div v-if="activeCommentId === moment.id" class="comment-input">
            <input
              ref="commentInput"
              v-model="newComment"
              :placeholder="replyTarget ? `回复 ${replyTarget.name}...` : '说点什么...'"
              @keyup.enter="addComment(moment)"
            />
            <button @click="addComment(moment)">
              <i class="ri-send-plane-fill"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="load-more" v-if="hasMore">
        <el-button type="primary" plain @click="loadMore"> 加载更多 </el-button>
      </div>

      <!-- 暂无朋友圈状态 -->
      <div v-if="momentsList.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="ri-chat-3-line"></i>
        </div>
        <p class="empty-text">暂无动态</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import PageHeader from '@/components/PageHeader.vue'
import { ElMessage } from 'element-plus'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

// 朋友圈数据
const momentsList = ref([
  {
    id: 1,
    author: {
      id: 101,
      name: '山海',
      avatar: 'https://picsum.photos/id/1005/300/300',
    },
    content: '今天天气真好，去爬山啦！登高望远，看到了整座城市的风景，感觉一切烦恼都烟消云散了。',
    images: [
      'https://picsum.photos/id/1036/800/800',
      'https://picsum.photos/id/1039/800/800',
      'https://picsum.photos/id/1043/800/800',
    ],
    location: '青城山',
    createTime: new Date('2024-04-18 10:25:00'),
    isLiked: false,
    likes: [
      { id: 201, name: '清风' },
      { id: 202, name: '流雨' },
      { id: 203, name: '明月' },
    ],
    comments: [
      { id: 301, name: '清风', content: '风景太美了，下次我也要去！' },
      { id: 302, name: '明月', content: '看起来空气很好，羡慕～' },
      { id: 303, name: '山海', content: '谢谢，确实很不错，推荐你们有空也去玩', replyTo: '清风' },
    ],
  },
  {
    id: 2,
    author: {
      id: 102,
      name: '流雨',
      avatar: 'https://picsum.photos/id/1012/300/300',
    },
    content:
      '新买的相机终于到了，迫不及待拍了几张照片，感觉效果还不错！以后可以记录更多美好瞬间了。',
    images: [
      'https://picsum.photos/id/146/800/800',
      'https://picsum.photos/id/152/800/800',
      'https://picsum.photos/id/153/800/800',
      'https://picsum.photos/id/160/800/800',
    ],
    location: '市中心',
    createTime: new Date('2024-04-17 16:40:00'),
    isLiked: true,
    likes: [
      { id: 201, name: '山海' },
      { id: 204, name: '星辰' },
    ],
    comments: [
      { id: 303, name: '星辰', content: '画质不错啊，什么型号？' },
      { id: 304, name: '山海', content: '构图很好，有天赋！' },
      { id: 305, name: '流雨', content: '谢谢夸奖，是佳能EOS R6', replyTo: '星辰' },
      { id: 306, name: '流雨', content: '多谢支持！', replyTo: '山海' },
    ],
  },
  {
    id: 3,
    author: {
      id: 103,
      name: '明月',
      avatar: 'https://picsum.photos/id/1027/300/300',
    },
    content:
      '读完这本书，感触很深。生活不仅是眼前的苟且，还有诗和远方。我们要做的，就是在苟且中寻找诗意，在平凡中发现美好。',
    images: ['https://picsum.photos/id/24/800/800'],
    location: '城市书房',
    createTime: new Date('2024-04-16 21:15:00'),
    isLiked: false,
    likes: [
      { id: 202, name: '流雨' },
      { id: 205, name: '飞雪' },
      { id: 206, name: '微风' },
    ],
    comments: [
      { id: 305, name: '飞雪', content: '这本书我也读过，确实很有启发。' },
      { id: 306, name: '微风', content: '推荐一下书名？' },
      { id: 307, name: '明月', content: '《平凡的世界》，路遥的作品。', replyTo: '微风' },
      { id: 308, name: '微风', content: '谢谢，我会去看看的。', replyTo: '明月' },
    ],
  },
  {
    id: 4,
    author: {
      id: 104,
      name: '星辰',
      avatar: 'https://picsum.photos/id/1025/300/300',
    },
    content: '今天做了一顿丰盛的晚餐犒劳自己，一周的忙碌终于告一段落，周末可以好好休息了。',
    images: [
      'https://picsum.photos/id/292/800/800',
      'https://picsum.photos/id/325/800/800',
      'https://picsum.photos/id/429/800/800',
      'https://picsum.photos/id/431/800/800',
      'https://picsum.photos/id/488/800/800',
      'https://picsum.photos/id/493/800/800',
    ],
    location: '温馨小厨',
    createTime: new Date('2024-04-15 19:30:00'),
    isLiked: true,
    likes: [
      { id: 201, name: '山海' },
      { id: 203, name: '明月' },
      { id: 206, name: '微风' },
    ],
    comments: [
      { id: 308, name: '山海', content: '看起来太美味了！' },
      { id: 309, name: '微风', content: '不愧是大厨，手艺真棒！' },
    ],
  },
  {
    id: 5,
    author: {
      id: 105,
      name: '飞雪',
      avatar: 'https://picsum.photos/id/1074/300/300',
    },
    content:
      '第一次尝试水彩画，虽然画得不太好，但是过程很享受。艺术的魅力就在于表达自我，不必追求完美。',
    images: [
      'https://picsum.photos/id/104/800/800',
      'https://picsum.photos/id/106/800/800',
      'https://picsum.photos/id/110/800/800',
    ],
    location: '艺术工作室',
    createTime: new Date('2024-04-14 14:20:00'),
    isLiked: false,
    likes: [
      { id: 202, name: '流雨' },
      { id: 204, name: '星辰' },
    ],
    comments: [{ id: 310, name: '流雨', content: '第一次就画得这么好，有天分！' }],
  },
  {
    id: 6,
    author: {
      id: 106,
      name: '微风',
      avatar: 'https://picsum.photos/id/1062/300/300',
    },
    content: '春日周末，和朋友们一起野餐，分享美食、阳光和笑声，这样的下午真是惬意。',
    images: [
      'https://picsum.photos/id/225/800/800',
      'https://picsum.photos/id/304/800/800',
      'https://picsum.photos/id/335/800/800',
      'https://picsum.photos/id/365/800/800',
      'https://picsum.photos/id/401/800/800',
      'https://picsum.photos/id/425/800/800',
      'https://picsum.photos/id/429/800/800',
      'https://picsum.photos/id/486/800/800',
      'https://picsum.photos/id/493/800/800',
    ],
    location: '城市公园',
    createTime: new Date('2024-04-13 16:10:00'),
    isLiked: true,
    likes: [
      { id: 201, name: '山海' },
      { id: 203, name: '明月' },
      { id: 205, name: '飞雪' },
    ],
    comments: [
      { id: 311, name: '明月', content: '野餐的食物看起来好丰盛！' },
      { id: 312, name: '山海', content: '春天就是要出去走走，呼吸新鲜空气！' },
      { id: 313, name: '飞雪', content: '下次叫上我一起啊～' },
      { id: 314, name: '微风', content: '好啊，下次组织一次大家一起去。', replyTo: '飞雪' },
      { id: 315, name: '明月', content: '我也想加入！', replyTo: '微风' },
    ],
  },
  {
    id: 7,
    author: {
      id: 107,
      name: '书生',
      avatar: 'https://picsum.photos/id/1010/300/300',
    },
    content:
      '读书笔记：《人类简史》让我深刻思考人类的过去、现在和未来。作者从宏观视角审视整个人类历史，认为农业革命是一场骗局，现代人反而比祖先承受更大的压力，这种观点非常有趣。书中讨论认知革命如何赋予智人独特的合作能力，让我们能组建大规模社会。农业革命之后，人类逐渐建立了庞大的想象现实，如宗教、国家、资本主义等，这些都是维系人类社会的"共同神话"。尤其喜欢作者对农业革命的反思，我们认为是人类驯化了小麦，但从基因成功角度看，也可以说是小麦驯化了人类——它让我们从自由的采集者变成了日复一日在田间劳作的农民。书中关于幸福的讨论也很发人深省，我们的物质生活远胜于祖先，但我们就更幸福了吗？这本书给了我全新的视角去理解人类社会，强烈推荐给热爱思考的朋友们。',
    images: ['https://picsum.photos/id/24/800/800'],
    location: '城市图书馆',
    createTime: new Date('2024-04-12 16:50:00'),
    isLiked: true,
    likes: [
      { id: 201, name: '山海' },
      { id: 203, name: '明月' },
      { id: 204, name: '星辰' },
      { id: 205, name: '飞雪' },
    ],
    comments: [
      { id: 320, name: '明月', content: '这本书我也读过，确实很震撼，改变了我的历史观。' },
      { id: 321, name: '星辰', content: '推荐一下作者的《未来简史》，同样很有启发。' },
      { id: 322, name: '书生', content: '谢谢推荐，已经加入我的阅读清单。', replyTo: '星辰' },
    ],
  },
])

// 是否有更多数据
const hasMore = ref(true)

// 当前活跃的评论输入框ID
const activeCommentId = ref(null)

// 新评论内容
const newComment = ref('')

// 评论输入框引用
const commentInput = ref(null)

// 回复目标用户
const replyTarget = ref(null)

// 是否显示回到顶部
const showBackTop = ref(false)

// 评论展开状态
const expandedComments = ref({})

// 文本展开状态
const expandedTexts = ref({})

// 判断是否为长文本（超过5行）
const isLongText = (text) => {
  if (!text) return false
  // 大致估算，一行约50个字符
  return text.length > 140
}

// 切换文本展开/收起状态
const toggleTextExpand = (momentId) => {
  expandedTexts.value[momentId] = !expandedTexts.value[momentId]
}

// 计算总点赞数
const getTotalLikes = () => {
  return momentsList.value.reduce((total, moment) => total + moment.likes.length, 0)
}

// 根据图片数量获取样式类名
const getImagesClass = (count) => {
  if (count === 1) return 'single-image'
  if (count === 2) return 'double-image'
  if (count === 4) return 'four-image'
  if (count >= 5) return 'multi-image'
  return ''
}

// 格式化时间
const formatTime = (dateTime) => {
  const now = new Date()
  const diffTime = now - dateTime

  // 一分钟内
  if (diffTime < 60 * 1000) {
    return '刚刚'
  }

  // 一小时内
  if (diffTime < 60 * 60 * 1000) {
    return Math.floor(diffTime / (60 * 1000)) + '分钟前'
  }

  // 一天内
  if (diffTime < 24 * 60 * 60 * 1000) {
    return Math.floor(diffTime / (60 * 60 * 1000)) + '小时前'
  }

  // 一周内
  if (diffTime < 7 * 24 * 60 * 60 * 1000) {
    return Math.floor(diffTime / (24 * 60 * 60 * 1000)) + '天前'
  }

  // 一周以上，显示具体日期
  const year = dateTime.getFullYear()
  const month = String(dateTime.getMonth() + 1).padStart(2, '0')
  const day = String(dateTime.getDate()).padStart(2, '0')

  return `${year}-${month}-${day}`
}

// 显示评论
const displayedComments = (moment) => {
  if (expandedComments.value[moment.id]) {
    // 显示全部评论
    return moment.comments
  } else {
    // 只显示前3条评论
    return moment.comments.slice(0, 3)
  }
}

// 展开评论
const expandComments = (momentId) => {
  expandedComments.value[momentId] = true
}

// 收起评论
const collapseComments = (momentId) => {
  expandedComments.value[momentId] = false
}

// 图片预览
const previewImage = (images, index) => {
  // 创建临时DOM元素用于图片预览
  const tempContainer = document.createElement('div')

  // 添加图片元素
  images.forEach((src) => {
    const img = document.createElement('img')
    img.src = src
    tempContainer.appendChild(img)
  })

  // 添加到文档中但不显示
  tempContainer.style.display = 'none'
  document.body.appendChild(tempContainer)

  // 初始化查看器
  const viewer = new Viewer(tempContainer, {
    initialViewIndex: index,
    inline: false,
    button: true,
    navbar: true,
    title: false,
    toolbar: {
      zoomIn: true,
      zoomOut: true,
      oneToOne: true,
      reset: true,
      prev: true,
      next: true,
      rotateLeft: true,
      rotateRight: true,
      flipHorizontal: true,
      flipVertical: true,
    },
    hidden: () => {
      // 查看器关闭时销毁
      viewer.destroy()
      document.body.removeChild(tempContainer)
    },
  })

  // 显示查看器
  viewer.show()
}

// 分享功能
const handleShare = (moment) => {
  // 获取分享内容
  const title = `${moment.author.name}的朋友圈动态`
  const text = moment.content
  const url = window.location.href

  // 尝试使用网页分享API
  if (navigator.share) {
    navigator
      .share({
        title: title,
        text: text,
        url: url,
      })
      .then(() => ElMessage.success('分享成功'))
      .catch(() => ElMessage.info('分享已取消'))
  } else {
    // 回退到复制链接
    navigator.clipboard
      .writeText(`${title}\n${text}\n${url}`)
      .then(() => ElMessage.success('链接已复制，可以分享给朋友了'))
      .catch(() => ElMessage.error('复制失败，请手动复制'))
  }
}

// 切换点赞状态
const toggleLike = (moment) => {
  // 切换点赞状态
  moment.isLiked = !moment.isLiked

  if (moment.isLiked) {
    // 添加点赞
    moment.likes.push({
      id: 999, // 这里应该是用户ID
      name: '我', // 这里应该是用户昵称
    })
    ElMessage.success('点赞成功')
  } else {
    // 取消点赞
    const index = moment.likes.findIndex((like) => like.id === 999)
    if (index !== -1) {
      moment.likes.splice(index, 1)
    }
    ElMessage.info('已取消点赞')
  }
}

// 聚焦评论输入框
const focusCommentInput = (momentId) => {
  activeCommentId.value = momentId
  newComment.value = ''
  replyTarget.value = null // 清空回复目标

  // 等待DOM更新后聚焦
  nextTick(() => {
    if (commentInput.value) {
      commentInput.value.focus()
    }
  })
}

// 回复特定评论
const replyToComment = (momentId, comment) => {
  activeCommentId.value = momentId
  replyTarget.value = { id: comment.id, name: comment.name }
  newComment.value = ''

  // 等待DOM更新后聚焦
  nextTick(() => {
    if (commentInput.value) {
      commentInput.value.focus()
    }
  })
}

// 添加评论
const addComment = (moment) => {
  if (!newComment.value.trim()) {
    ElMessage.warning('评论内容不能为空')
    return
  }

  // 添加新评论
  const newCommentObj = {
    id: Date.now(), // 使用时间戳作为临时ID
    name: '我', // 这里应该是用户昵称
    content: newComment.value,
  }

  // 如果是回复特定评论，添加回复信息
  if (replyTarget.value) {
    newCommentObj.replyTo = replyTarget.value.name
  }

  moment.comments.push(newCommentObj)

  // 清空输入框
  newComment.value = ''
  activeCommentId.value = null
  replyTarget.value = null

  // 如果之前未展开评论，自动展开以显示新回复
  if (moment.comments.length > 3 && !expandedComments.value[moment.id]) {
    expandedComments.value[moment.id] = true
  }

  ElMessage.success('评论成功')
}

// 加载更多
const loadMore = () => {
  // 模拟加载更多数据
  ElMessage.info('加载中...')

  // 实际应用中，这里应该是调用API获取更多数据
  setTimeout(() => {
    // 模拟没有更多数据
    hasMore.value = false
    ElMessage.info('已加载全部内容')
  }, 1000)
}

// 监听滚动事件
const handleScroll = () => {
  showBackTop.value = window.scrollY > 300
}

// 页面挂载时添加滚动监听
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 页面卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.moments-page {
  padding: 2rem 1rem 4rem;
  max-width: 960px;
  margin: 0 auto;
  position: relative;

  // 朋友圈列表
  .moments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    // 朋友圈卡片
    .moment-card {
      background: var(--bg-color, white);
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
      }

      // 用户信息
      .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;

        .avatar {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.75rem;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .info {
          flex: 1;

          .name {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-color, #333);
            margin-bottom: 0.25rem;
          }

          .time {
            font-size: 0.875rem;
            color: var(--text-color-secondary, #777);
          }
        }
      }

      // 内容区域
      .content {
        margin-bottom: 1rem;

        .text {
          font-size: 1rem;
          line-height: 1.6;
          margin-bottom: 0.75rem;
          color: var(--text-color, #333);
          word-break: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4; /* 默认显示4行 */
          -webkit-box-orient: vertical;

          &.text-expanded {
            display: block;
            -webkit-line-clamp: unset;
          }
        }

        .text-toggle {
          display: flex;
          align-items: center;
          color: var(--primary-color, #409eff);
          font-size: 0.875rem;
          margin-bottom: 0.75rem;
          cursor: pointer;
          user-select: none;

          &:hover {
            opacity: 0.8;
          }

          i {
            margin-left: 0.25rem;
            font-size: 1.25rem;
          }
        }

        // 图片区域
        .images {
          display: grid;
          gap: 0.5rem;
          margin-bottom: 0.75rem;

          // 单张图片
          &.single-image {
            grid-template-columns: 1fr;

            .image-wrapper {
              max-width: 70%;

              img {
                max-height: 30rem;
                object-fit: contain;
              }
            }
          }

          // 两张图片
          &.double-image {
            grid-template-columns: repeat(2, 1fr);
          }

          // 三张图片 (默认)
          grid-template-columns: repeat(3, 1fr);

          // 四张图片
          &.four-image {
            grid-template-columns: repeat(2, 1fr);
          }

          // 多张图片 (5-9张)
          &.multi-image {
            grid-template-columns: repeat(3, 1fr);
          }

          .image-wrapper {
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 0.375rem;
            cursor: pointer;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s ease;

              &:hover {
                transform: scale(1.03);
              }
            }
          }
        }

        // 位置信息
        .location {
          display: flex;
          align-items: center;
          font-size: 0.875rem;
          color: var(--text-color-secondary, #777);

          i {
            margin-right: 0.375rem;
          }
        }
      }

      // 互动区域
      .interaction {
        // 操作栏
        .action-bar {
          display: flex;
          border-top: 1px solid var(--border-color, #eee);
          margin-top: 0.5rem;
          padding-top: 0.75rem;

          .action {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            padding: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-color-secondary, #777);
            cursor: pointer;
            transition: all 0.2s ease;
            border-radius: 0.25rem;

            &:hover {
              background: var(--bg-color-hover, #f5f5f5);
              color: var(--primary-color, #409eff);
            }

            i {
              font-size: 1.125rem;

              &.liked {
                color: var(--heart-color, #ff4757);
              }
            }
          }
        }

        // 点赞区域
        .likes-section {
          display: flex;
          align-items: flex-start;
          margin-top: 0.75rem;
          padding: 0.75rem;
          background: var(--bg-color-light, #f8f8f8);
          border-radius: 0.375rem;

          .likes-icon {
            color: var(--heart-color, #ff4757);
            margin-right: 0.5rem;
          }

          .likes-list {
            flex: 1;
            font-size: 0.875rem;
            color: var(--primary-color, #409eff);

            span {
              cursor: pointer;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }

        // 评论区域
        .comments-section {
          margin-top: 0.5rem;
          padding: 0.75rem;
          background: var(--bg-color-light, #f8f8f8);
          border-radius: 0.375rem;
          font-size: 0.875rem;

          .comment {
            margin-bottom: 0.5rem;
            line-height: 1.5;

            &:last-child {
              margin-bottom: 0;
            }

            .comment-content-wrapper {
              cursor: pointer;
              padding: 0.25rem 0.5rem;
              border-radius: 0.25rem;
              transition: background-color 0.2s ease;

              &:hover {
                background-color: rgba(0, 0, 0, 0.05);
              }
            }

            .commenter {
              color: var(--primary-color, #409eff);
              font-weight: 500;
              margin-right: 0.375rem;

              &:hover {
                text-decoration: underline;
              }
            }

            .reply-tag,
            .reply-to {
              color: var(--primary-color, #409eff);
              font-weight: 500;
            }

            .comment-content {
              color: var(--text-color, #333);
            }
          }

          .view-more-comments {
            margin-top: 0.5rem;
            color: var(--text-color-secondary);
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color 0.2s ease;

            &:hover {
              color: var(--primary-color);
            }

            i {
              margin-left: 0.25rem;
              font-size: 1.125rem;
            }
          }
        }

        // 评论输入框
        .comment-input {
          margin-top: 0.75rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;

          input {
            flex: 1;
            padding: 0.625rem 1rem;
            border: 1px solid var(--border-color, #ddd);
            border-radius: 2rem;
            font-size: 0.875rem;
            outline: none;
            transition: all 0.3s ease;

            &:focus {
              border-color: var(--primary-color, #409eff);
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }
          }

          button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border: none;
            border-radius: 50%;
            background: var(--primary-color, #409eff);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background: var(--primary-color-dark, #337ecc);
            }

            i {
              font-size: 1.25rem;
            }
          }
        }
      }
    }

    // 加载更多
    .load-more {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
    }

    // 暂无内容
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 3rem 0;
      color: var(--text-color-secondary, #999);

      .empty-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
      }

      .empty-text {
        font-size: 1rem;
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .moments-page {
    padding: 1.5rem 0.75rem 3rem;

    .moments-list {
      .moment-card {
        padding: 1.25rem;

        .content {
          .images {
            &.single-image {
              .image-wrapper {
                max-width: 100%;

                img {
                  max-height: 20rem;
                }
              }
            }
          }
        }
      }
    }
  }
}

.back-to-top {
  display: none; /* 禁用朋友圈页面自带的返回顶部按钮 */
}
</style>
